<template>
  <el-dialog title="权限设置" :visible="show" :before-close="closeDialog" >
    <el-tree
      ref="tree"
      :data="data"
      show-checkbox
      node-key="id"
      :default-checked-keys="defaultChecked"
      :props="menuProps"
    >
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelHandler">取 消</el-button>
      <el-button type="primary" @click="okHandler"  >确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getList } from '@/api/system/menu'
import dataOpt from '@/utils/data-opt'
export default {
  name:"MenuTreeSelect",
  props:{
    show:{
      type: Boolean,
      default:true,
    },
    saveHandler:{
      type:Function
    },
    closeHandler:{
      type:Function
    },
    defaultChecked:{
      type: Array
    }
  },
  data(){
    return {
      data:{},
      menuProps:{
        children:"children",
        label:"name"
      }
    }
  },
  created() {
    this.getMenuList();
  },
  methods:{
    getMenuList(){
      getList().then(rsp=>{
        this.data = dataOpt.transferToTreeData(rsp.data);
      })
    },
    closeDialog(){
      if(this.closeHandler){
        this.closeHandler();
      }
    },
    cancelHandler(){
      this.closeDialog();
    },
    okHandler(){
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      this.saveHandler(checkedKeys);
      this.closeDialog();
    }
  }
}
</script>